<template>
  <div class="ss_big">
    <div class="ss_top_22">
      <p><span>安全设置</span></p>
    </div>
    <div class="title_one">
      <!-- 安全级别 -->
      <div>
        <div class="content_1">
          <p><span>安全级别 <el-rate v-model="value" :colors="colors"> </el-rate></span> </p>
          
        </div>
      </div>
      <div class="SecuritySetting_1">
        <div class="SecuritySetting_2" v-if="show_v == false">
          <i class="el-icon-warning" style="color: red"></i> 未认证
        </div>
        <div class="SecuritySetting_2" v-if="show_v == true">
          <i class="el-icon-success" style="color: #5cb6ff"></i> 已认证
        </div>
        <div class="SecuritySetting_3">实名认证</div>
        <div class="SecuritySetting_5">保障账户安全，确认投资身份。</div>
        <div class="SecuritySetting_4" v-if="show_v == false">
          <el-button type="danger" plain @click="SecuritySetting_button1"
            >实名认证</el-button
          >
        </div>
        <div class="SecuritySetting_6" v-if="show_v == true"></div>
      </div>

      <div class="SecuritySetting_1">
        <div class="SecuritySetting_2" v-if="show6_v == false">
          <i class="el-icon-warning" style="color: red"></i> 未开通
        </div>
        <div class="SecuritySetting_2" v-if="show6_v == true">
          <i class="el-icon-success" style="color: #5cb6ff"></i> 已开通
        </div>
        <div class="SecuritySetting_3">存管账户</div>
        <div class="SecuritySetting_5">
          保障账户安全，开通资金存管账户，即可充值投资。
        </div>
        <div class="SecuritySetting_4" v-if="show6_v == false">
          <el-button
            type="danger"
            plain
            class="SecuritySetting_button1"
            @click="SecuritySetting_button2_1"
            >存管账户</el-button
          >
        </div>
        <div class="SecuritySetting_6" v-if="show6_v == true"></div>
      </div>

      <div class="SecuritySetting_1">
        <div class="SecuritySetting_2" v-if="show2_v == true">
          <i class="el-icon-warning" style="color: red"></i> 未设置
        </div>
        <div class="SecuritySetting_2" v-if="show2_v == false">
          <i class="el-icon-success" style="color: #5cb6ff"></i> 已设置
        </div>
        <div class="SecuritySetting_3">交易密码</div>
        <div class="SecuritySetting_5">
          保障资金安全，投资、取现或修改银行卡等资金相关操作时使用。
        </div>
        <div class="SecuritySetting_4" v-if="show2_v == true">
          <el-button
            type="danger"
            plain
            class="SecuritySetting_button2"
            @click="SecuritySetting_button2"
            >交易密码</el-button
          >
        </div>
        <div
          class="SecuritySetting_6"
          v-if="show2_v == false"
          @click="SecuritySetting_button2"
        >
          修改
        </div>
      </div>

      <div class="SecuritySetting_1">
        <div class="SecuritySetting_2" v-if="show4_v == false">
          <i class="el-icon-warning" style="color: red"></i> 未设置
        </div>
        <div class="SecuritySetting_2" v-if="show4_v == true">
          <i class="el-icon-success" style="color: #5cb6ff"></i> 已设置
        </div>
        <div class="SecuritySetting_3">登录密码</div>
        <div class="SecuritySetting_5">
          登录账户时需要填写的密码，建议定期更换登录密码。
        </div>
        <div class="SecuritySetting_4" v-if="show4_v == float">
          <el-button type="danger" plain class="SecuritySetting_button4"
            >登录密码</el-button
          >
        </div>
        <div
          class="SecuritySetting_6"
          v-if="show4_v == true"
          @click="SecuritySetting_button4"
        >
          修改
        </div>
      </div>

      <div class="SecuritySetting_1">
        <div class="SecuritySetting_2" v-if="show5_v == true">
          <i class="el-icon-warning" style="color: red"></i> 未认证
        </div>
        <div class="SecuritySetting_2" v-if="show5_v == false">
          <i class="el-icon-success" style="color: #5cb6ff"></i> 已认证
        </div>
        <div class="SecuritySetting_3">手机认证</div>
        <div class="SecuritySetting_5">
          保障账户安全，并及时获取账户资金变动通知和出借讯息
        </div>
        <div class="SecuritySetting_4" v-if="show5_v == true">
          <el-button type="danger" plain class="SecuritySetting_button5"
            >手机认证</el-button
          >
        </div>
        <div class="SecuritySetting_6" v-if="show5_v == false"></div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      hh: "",
      show: false,
      show_v: null,
      show2_v: null,
      show4_v: null,
      show5_v: null,
      show6_v: null,
       value: 0,
    };
  },
  methods: {
    SecuritySetting_button1() {
      this.$router.push({ path: "ID1" });
    },
    SecuritySetting_button2_1() {
      this.$router.push({ path: "TransactionPassword5" });
    },
    SecuritySetting_button2() {
      this.$router.push({ path: "Password2" });
    },
    SecuritySetting_button3() {
      this.$router.push({ path: "Mailbox3" });
    },
    SecuritySetting_button4() {
      this.$router.push({ path: "Phone4" });
    },
    SecuritySetting_button5() {
      this.$router.push({ path: "Healthys" });
    },
    format(percentage) {
      return percentage === 100 ? "满" : `${percentage}%`;
    },
    get1() {
      axios({
        url: "api/query/queryUserCard",
        method: "get",
      }).then((res) => {
        this.show_v = res.data;
        console.log(res.data);
        if(res.data==true){
          this.value=this.value+1
        }
      });
    },
    get2() {
      axios({
        url: "api/query/queryUserBankCard",
        method: "get",
      }).then((res) => {
        this.show6_v = res.data;
        console.log(res.data);
        if(res.data==true){
          this.value=this.value+1
        }
      });
    },
    get3() {
      axios({
        url: "api/query/queryUserWith",
        method: "get",
      }).then((res) => {
        this.show2_v = res.data;
        if(res.data==false){
          this.value=this.value+1
        }
      });
    },
    
    get5() {
      axios({
        url: "api/query/queryUserPwd",
        method: "get",
      }).then((res) => {
        this.show4_v = res.data;
        if(res.data==true){
          this.value=this.value+1
        }
      });
    },

    get6() {
      axios({
        url: "api/query/queryUserPhone ",
        method: "get",
      }).then((res) => {
        this.show5_v = res.data;
        if(res.data==false){
          this.value=this.value+1
        }
      });
    },
  },
  created() {
    this.get1();
    this.get2();
    this.get3();

    this.get5();
    this.get6();
  },
};
</script>

<style>
.SecuritySetting_6 {
  font-size: 90%;
  float: right;
  line-height: 70px;
  color: #5cb6ff;
  cursor: pointer;
  margin-right: 30px;
}
.SecuritySetting_2 {
  float: left;
  line-height: 60px;
}
.SecuritySetting_3 {
  float: left;
  line-height: 60px;
  margin-left: 40px;
}
.SecuritySetting_4 {
  float: right;
  line-height: 70px;
}
.SecuritySetting_5 {
  float: left;
  line-height: 60px;
  margin-left: 40px;
  font-size: 80%;
  color: #c0b4b4;
}
.SecuritySetting_1 {
  width: 100%;
  float: left;
  height: 70px;
  /* background-color: red; */
  margin-top: 10px;
  border-bottom: 1px solid #c9c2c2;
}
.content_1 {
  float: left;
  width: 93%;
  height: auto;
  border-bottom: 2.3px solid #efefef;
  line-height: 4;
  font-size: 16px;
}
.title_one {
  width: 85%;
  height: 900px;
  margin: 0 auto;
}
.ss_top_22 {
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
  font-style: normal;
  font-weight: 700;
  margin-left: 30px;
  width: 93%;
  height: auto;
  border-bottom: 2.3px solid #efefef;
  line-height: 4;
  font-size: 18px;
}
</style>